<template>
  <div class="page-container-padding">
    <div style="color: #f56c6c">
      提示：以下只需设定其中一种即可，有效时间:个人设定->身份角色->系统角色。
    </div>
    <!-- 系统角色 -->
    <div style="margin-top: 32px">
      <div class="block-title" style="color: #e6a23c">系统角色</div>
      <el-select
        v-model="role_code"
        size="mini"
        style="margin-right: 8px"
        @change="getRoleMenus(role_code)"
      >
        <el-option :value="1000" label="普通用户"></el-option>
        <el-option :value="2000" label="营业部用户"></el-option>
        <el-option :value="3000" label="品种研究员"></el-option>
        <el-option :value="4000" label="特别研究员"></el-option>
        <el-option :value="9000" label="普通管理员"></el-option>
        <el-option :value="9999" label="超级管理员"></el-option>
      </el-select>
      <span>
        <el-button type="primary" size="mini" @click="getRoleMenus(role_code)">
          查询
        </el-button>
      </span>
      <el-table
        style="margin-top: 8px"
        row-key="id"
        border
        stripe
        size="mini"
        :data="roleMenuList"
      >
        <el-table-column prop="menu_name" label="功能菜单"></el-table-column>
        <el-table-column
          prop="menu_code"
          label="编码"
          width="100px"
        ></el-table-column>
        <el-table-column
          prop="hidden_zh"
          label="隐藏菜单"
          width="100px"
        ></el-table-column>
        <el-table-column
          prop="expire"
          label="到期日"
          width="150px"
        ></el-table-column>
        <el-table-column label="权限" width="70">
          <template #default="scope">
            <el-switch
              v-model="scope.row.is_access"
              :disabled="scope.row.no_edit"
              size="mini"
              @change="roleMenuAccessChange(scope.row, role_code)"
            ></el-switch>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 身份角色 -->
    <div style="margin-top: 32px">
      <div class="block-title" style="color: #66b1ff">身份角色</div>
      <el-select
        v-model="out_role"
        size="mini"
        style="margin-right: 8px"
        @change="getRoleMenus(out_role)"
      >
        <el-option :value="254" label="投资经理"></el-option>
        <el-option :value="253" label="咨询人员"></el-option>
        <el-option :value="252" label="研究人员"></el-option>
        <el-option :value="251" label="资管支持人员"></el-option>
        <el-option :value="250" label="客户"></el-option>
        <el-option :value="248" label="营业部用户"></el-option>
        <el-option :value="249" label="业务人员"></el-option>
        <el-option :value="255" label="开发人员"></el-option>
        <el-option :value="100" label="其他"></el-option>
      </el-select>
      <span>
        <el-button type="primary" size="mini" @click="getRoleMenus(out_role)">
          查询
        </el-button>
      </span>
      <el-table
        style="margin-top: 8px"
        row-key="id"
        border
        stripe
        size="mini"
        :data="outRoleMenuList"
      >
        <el-table-column prop="menu_name" label="功能菜单"></el-table-column>
        <el-table-column
          prop="menu_code"
          label="编码"
          width="100px"
        ></el-table-column>
        <el-table-column
          prop="hidden_zh"
          label="隐藏菜单"
          width="100px"
        ></el-table-column>
        <el-table-column
          prop="expire"
          label="到期日"
          width="150px"
        ></el-table-column>
        <el-table-column prop="access" label="权限" width="70">
          <template #default="scope">
            <el-switch
              v-model="scope.row.is_access"
              :disabled="scope.row.no_edit"
              size="mini"
              @change="roleMenuAccessChange(scope.row, out_role)"
            ></el-switch>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 个人功能 -->
    <div style="margin-top: 32px">
      <div class="block-title">特别指定</div>
      <el-select
        v-model="currentUserId"
        filterable
        clearable
        remote
        size="mini"
        :remote-method="getUserByName"
        :loading="userLoading"
        @change="userSelectChange"
      >
        <el-option
          v-for="user in userSelectList"
          :key="user.id"
          :value="user.id"
          :label="user.admin_name"
        ></el-option>
      </el-select>
      <span style="margin-left: 16px">
        <el-tag type="warning">{{ currentObj.sysRoleName }}</el-tag>
      </span>
      <span style="margin-left: 16px">
        <el-tag type="primary">{{ currentObj.outRoleName }}</el-tag>
      </span>
      <el-table
        style="margin-top: 8px"
        row-key="id"
        border
        stripe
        size="mini"
        :data="userMenuList"
      >
        <el-table-column prop="menu_name" label="功能菜单"></el-table-column>
        <el-table-column
          prop="menu_code"
          label="编码"
          width="100px"
        ></el-table-column>
        <el-table-column
          prop="hidden_zh"
          label="隐藏菜单"
          width="100px"
        ></el-table-column>
        <el-table-column
          prop="expire"
          label="到期日"
          width="150px"
        ></el-table-column>
        <el-table-column prop="access" label="权限" width="70">
          <template #default="scope">
            <el-switch
              v-model="scope.row.is_access"
              :disabled="scope.row.no_edit"
              size="mini"
              @change="privateAccessChange(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
  import {
    GetRoleMenuAccess,
    SetRoleMenuAccess,
    GetPrivateMenuAccess,
    SetPrivateMenuAccess,
    GetUserListByName,
  } from '@/api/systemManage/userInfo'
  export default {
    data() {
      return {
        role_code: 1000,
        out_role: 100,
        roleMenuList: [],
        outRoleMenuList: [],
        userMenuList: [],
        userSelectList: [],
        userLoading: false,
        currentUserId: null,
        currentObj: {
          uid: null,
          sysRoleCode: 0,
          sysRoleName: '',
          outRoleCode: 0,
          outRoleName: '',
        },
      }
    },
    mounted() {
      this.getRoleMenus(this.role_code)
      this.getRoleMenus(this.out_role)
    },
    methods: {
      getRoleMenus(role) {
        GetRoleMenuAccess(role).then((res) => {
          if (parseInt(role) > 255) {
            // 系统角色
            this.roleMenuList = res.data
          } else {
            // 身份角色
            this.outRoleMenuList = res.data
          }
        })
      },

      getUserMenus() {
        GetPrivateMenuAccess(this.currentObj.uid).then((res) => {
          this.userMenuList = res.data
        })
      },

      // 使用名称搜索用户
      getUserByName(name) {
        if (name === '') {
          return
        }
        this.userLoading = true
        GetUserListByName(name).then((res) => {
          this.userSelectList = res.data
          this.userLoading = false
        })
      },

      userSelectChange(value) {
        this.currentObj.sysRoleCode = 0
        this.currentObj.outRoleCode = 0
        this.currentObj.sysRoleName = ''
        this.currentObj.outRoleName = ''
        this.currentObj.uid = null
        if (!value) {
          this.userMenuList = []
          return
        }
        this.userSelectList.forEach((ele) => {
          if (ele.id === value) {
            this.currentObj.uid = ele.id
            this.currentObj.sysRoleCode = ele.role_code
            this.currentObj.outRoleCode = ele.out_role
            this.currentObj.sysRoleName = ele.sys_role_name
            this.currentObj.outRoleName = ele.out_role_name
          }
        })
        if (this.currentObj.uid) {
          this.getUserMenus()
        }
      },

      roleMenuAccessChange(row, roleCode) {
        const roleMenu = {
          role_code: roleCode,
          menu_code: row.menu_code,
          expire: '2099-12-31',
        }
        if (!row.is_access) {
          const curDate = new Date(new Date().getTime() - 24 * 60 * 60 * 1000)
          roleMenu.expire = `${curDate.getFullYear()}-${
            curDate.getMonth() + 1
          }-${curDate.getDate()}`
        }
        SetRoleMenuAccess(roleMenu)
          .then((res) => {
            this.$baseMessage('设置成功!', 'success')
            this.getRoleMenus(roleCode)
          })
          .catch(() => {
            this.getRoleMenus(roleCode)
          })
      },
      privateAccessChange(row) {
        const privateMenu = {
          user_id: this.currentObj.uid,
          menu_code: row.menu_code,
          expire: '2099-12-31',
        }
        if (!row.is_access) {
          const curDate = new Date(new Date().getTime() - 24 * 60 * 60 * 1000)
          privateMenu.expire = `${curDate.getFullYear()}-${
            curDate.getMonth() + 1
          }-${curDate.getDate()}`
        }
        SetPrivateMenuAccess(privateMenu)
          .then((res) => {
            this.$baseMessage('设置成功!', 'success')
            this.getUserMenus()
          })
          .catch(() => {
            this.getUserMenus()
          })
      },
    },
  }
</script>
<style scoped lang="scss">
  .block-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
  }
</style>
